<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue学习/vue.js"></script>
</head>

<body>
    <!-- 组件化编程  父子属性 -->
    <!-- 组件动态获取数据 -->
    <div id="app">
        <student></student>
        <student></student>



        <!-- 直接获取的是父组件的属性 -->
        <p>{{name}}</p>
        <p>{{age}}</p>

    </div>
    <!-- 1.声明组件 -->
    <!-- 子组件：是无法直接获取到父组件（当前vue对象）中的数据 -->
    <template id="stu">
      <div>
        <!-- 默认情况下获取到当前子组件中的数据 -->
        <p>{{name}}</p>
        <p>{{age}}</p>
      </div>
    </template>
    <script>
        // 2.注册组件
        Vue.component("student", {
            template: "#stu",
            data() { //定义子组件的数据，而且data必须是函数，而且返回值必须是一个对象，
                //是函数的原因为了避免多个子组件之间数据的互相影响，
                //原理是每次获取数据时都是调用的data函数，得到的都是一个新的对象，多个组件得到是不同的对象
                return {
                    name: "小丽",
                    age: 11
                };
            }
        })

        // 父组件
        new Vue({
            el: "#app",
            data: {
                name: "小明",
                age: 10
            }
        });
    </script>
</body>

</html>